<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="查找用户">
        <el-select v-model="selUser"  :filterable="true" remote :reserve-keyword="false" size="mini" allow-create
                   default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod" value-key="id">
          <el-option v-for="(user,index) in users" :key="index" :label="user.name" :value="user" v-if="users">
            <span style="float: left">{{ user.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择体检项" v-if="selUser">
        <el-card>
          <checkItems :currUser="selUser"></checkItems>
        </el-card>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="createUserDialog">
      <create-user :newName="newName" v-on:cancel="cancelDialog"></create-user>
      <!--<el-form :rules="rules" ref="userForm" :model="userForm" label-width="80px" :inline="true">-->
        <!--<el-form-item label="姓名"  prop="name">-->
          <!--<el-input size="mini" v-model="userForm.name" style="width: 200px"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="性别" prop="gender">-->
          <!--<el-radio v-model="userForm.gender" label="1">男</el-radio>-->
          <!--<el-radio v-model="userForm.gender" label="2">女</el-radio>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="手机" prop="phone">-->
          <!--<el-input size="mini" v-model="userForm.phone" style="width: 200px"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="生日">-->
          <!--<el-input size="mini" v-model="userForm.birthday" style="width: 200px"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="邮件">-->
          <!--<el-input size="mini" v-model="userForm.email" style="width: 200px"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="婚姻">-->
          <!--<el-switch size="mini" v-model="userForm.isMarried" active-text="已婚" inactive-text="未婚"/>-->
        <!--</el-form-item>-->
        <!--<el-form-item label=" ">-->
          <!--<el-button type="primary" @click="createUser('userForm')" size="mini">立即创建</el-button>-->
          <!--<el-button @click="resetForm('userForm')" size="mini">重置</el-button>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
    </el-dialog>
  </section>
</template>

<script>
  import createUser from "@/components/createUser"
  import checkItems from "@/components/order/checkItems";
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "createExamine",
    components: {checkItems,createUser},
    data() {
      return {
        newName:null,
        users:[],
        selUser:null,
        examineTypes:[],
        createUserDialog:false,
        userForm:{ name:'', gender:'', phone:'', birthday:'', email:'', isMarried:''},
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],
          gender:[
            { required: true, message: '请确认性别', trigger: 'change' }
          ],
          phone:[
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11', trigger: 'blur'}
          ],
        }
      }
    },
    created(e){
      console.log(this.department)
    },
    watch:{
      selUser(nv,ov){
        if(typeof(nv) === "string"){
          //跳出新建用户的对话框
          this.newName=nv
          this.createUserDialog=true
        }
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      cancelDialog(e){
        console.log(e)
        this.selUser=e
        this.createUserDialog=false
      },
      remoteMethod(keyword) {
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getUserList",data:{keyword}})
            .then(res=>{
              this.users=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},1000)
      },
      createExamine(){//创建体检
        // url: '/his/examine/createByAppointment',
        // require:['token','clientid','name','departmentCode','userId']//data(选)、、examineItems(选)
      },
    }
  }
</script>

<style scoped>

</style>
